<template>
  <label :for="name + label" class="m-radio" :class="{disabled: disabled}">
    <input type="radio" ref="radio"
      :name="name" 
      :value="label"
      :id="name + label"
      :disabled="disabled"
      @click="onClick">
    <span class="radio-btn"></span>
    <slot></slot>
  </label>
</template>

<script>
export default {
  props: {
    value: {
      type: [String, Number, Boolean],
      deufult: ''
    },
    label: {
      type: [String, Number],
      default: ''
    },
    name: {
      type: String,
      deufult: null
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  watch: {
    value() {
      this.$refs.radio.checked = false
      if (this.value == this.label) {
        this.$refs.radio.checked = true
      }
    }
  },
  mounted() {
    if (this.value == this.label) {
      this.$refs.radio.checked = true
    }
  },
  methods: {
    onClick(ev) {
      this.$emit('input', ev.target.value)
      this.$emit('on-radio')
    }
  }
}
</script>

<style lang="scss" scoped>
@import '../scss/_var.scss';
.m-radio {
  display: inline-block;
  cursor: pointer;
  &.disabled {
    cursor: not-allowed;
    color: #999;
  }
  .radio-btn {
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 5px;
    border: 1px solid #bfcbd9;
    background: #f1f1f1;
    border-radius: 8px;
    vertical-align: middle;
  }
  input {
    width: 0;
    height: 0;
    opacity: 0;
    &:checked + .radio-btn {
      transition: all .2s;
      border-color: $color-main;
      box-shadow: inset 0 0 0 4px $color-main;
    }
  }
}
</style>